const itme_li = document.querySelector(".itme_li");
const itme_li_dis = document.querySelector(".itme_li_dis");
const qr_itme_li = document.querySelector(".qr_itme_li");
const qr_itme_img = document.querySelector(".qr_itme_img");
const SecondaryMenu = document.querySelectorAll(".SecondaryMenu");
const direction = document.querySelectorAll(".direction")
const submenu = document.querySelectorAll(".submenu");
const menu = document.querySelector(".menu");
const page = document.querySelector(".page");
const nav = document.querySelector(".categorise_nav");


itme_li.onmouseenter = function(){
    itme_li_dis.style.display = "block";
    itme_li.onmouseleave = function(){
        itme_li_dis.style.display = "none";
    }
}
qr_itme_li.onmouseenter = function(){
    qr_itme_img.style.display = "block";
    qr_itme_li.onmouseleave = function(){
        qr_itme_img.style.display = "none";
    }
}
nav.onmouseenter = function(){
    page.style.display = "block";
    nav.onmouseleave = function(){
        page.style.display = "none";
    }
}
page.onmouseenter = function(){
    page.style.display = "inline-block";
    page.onmouseleave = function(){
        page.style.display = "none";
    }
}
// 二级菜单
for(var j=0;j<submenu.length;j++){
    submenu[j].index = j;
    submenu[j].onmouseenter = function(){
        for( let i = 0;i<submenu.length;i++){
            direction[i].style.display = "none";
            SecondaryMenu[i].style.display = "none";
        }
        direction[this.index].style.display = "block";
        SecondaryMenu[this.index].style.display = "block";
        SecondaryMenu[this.index].style.top = this.index * SecondaryMenu[this.index].offsetWidth/25+"px";
        for(let j=0;j<submenu.length;j++){
            SecondaryMenu[j].onmouseleave = function(){
                this.index = j
                direction[this.index].style.display = "none";
                SecondaryMenu[this.index].style.display = "none";
            }
        }
        
        menu.onmouseleave = function(){
            for(let j=0;j<submenu.length;j++){
                direction[j].style.display = "none";
                SecondaryMenu[j].style.display = "none";
            }
        }
    }
}
// 筛选
class Fliter{
    constructor(){
        this.spn = document.querySelectorAll(".fliter_ban .itme_sort");
        this.addEvent();
    }
    addEvent(){
        const _this = this;
        for(let i=0;i<this.spn.length;i++){
            this.spn[i].index = i;
            this.spn[i].addEventListener("click",function(){
                for(let j=0;j<_this.spn.length;j++){
                    _this.spn[j].className = "itme_sort";
                }
                _this.spn[i].className = "itme_sort active";
            })
        }
    }
}
new Fliter();
// 大小图
class ImgChange{
    constructor(){
        this.sImg = document.querySelectorAll(".dis_change span");
        this.addEvent();
    }
    addEvent(){
        const _this = this;
        for(let i=0;i<this.sImg.length;i++){
            this.sImg[i].index = i;
            this.sImg[i].addEventListener("click",function(){
                for(let j=0;j<_this.sImg.length;j++){
                    _this.sImg[j].className = "";
                }
                _this.sImg[i].className = "active";
            })
        }
    }
}
new ImgChange();
